<template>
  <header class="header">
    <ul class="header-list">
      <li
        class="header-list-item"
        v-for="item in nav"
        :key="item"
      >{{item}}</li>
    </ul>
  </header>
</template>
<script>
export default {
  name: 'v-header',
  data () {
    return {
      nav: []
    }
  },
  created () {
    this.nav = ['SSR', 'Vue', 'Vuex', 'Vue-router', 'React', 'Webpack', 'Node.js', 'Express']
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.header {
  /* position: fixed;
  top: 0;
  left: 0;  */
  width: 100%;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  transition: all 0.2s;
  background: #fff;
  height: 3.833rem;
  line-height: 3.833rem;
  margin: auto;
  .header-list {
    display: flex;
    max-width: 960px;
    margin: auto;
    .header-list-item {
      padding: 0 1.5rem;
      font-size: 1.16rem;
      transition: all .3s;
      border-bottom: 2px solid transparent;
      cursor: pointer;
      color: #71777c;
      &:hover {
        color: #007fff;
        border-color: #007fff;
      }
    }
    .header-list-item-active {
      padding: 0 1.5rem;
      font-size: 1.16rem;
      transition: all .3s;
      cursor: pointer;
      border-bottom: 2px solid transparent;
      color: #007fff;
      border-color: #007fff;
    }
  }
}
</style>
